<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<link href="/lib/css/business.css" type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/lib/js/jquery.qrcode.min.js"></script> 
<style type="text/css">
.cartDetial{
	background-image: url('/lib/images/business/cart_detial.png');
	background-repeat: no-repeat;
	width: 800px;
	height: 180px;
}
.cartDetial li{
	margin: auto;
	text-algin: center;
	height: 150px;
	float: left;
}
.detial_a{
	width: 160px;
}
.detial_a img{
	margin-top: 5%;
	margin-left: 5%;
}
.detial_a span{
	margin-left: 20%;
}
.detial_b{
	width: 450px;
}
.detial_b div{
	margin-top: 6%;
}
.detial_c{
	width: 140px;
}
.detial_c div{
	margin-top: 20%;
	margin-left: 30%;
}
</style>
</head>
<body>
<div class="bgbox">
<div id="header" class="header"  >
	<%	var name = session.account.name!;
	if(name == null){ %>
	<a href="javascript:showLogin();" class="left"><span>登录</span>|</a>
	<% }else{ %>
	<a href="/toModifyAccountMsg" class="left"><span>${session.account.name!}</span>|</a>
	<% } %>
	<a href="/business/cart/toCart" class="left"><span>我的购物车</span>|</a>
	<a href="/" class="left"><span>首页</span></a>
	<a href="/logout" class="right"><span>退出</span></a>
	<a href="/business/order/toOrderHistory" class="right"><span>我的订单</span>|</a>
</div>
<div class="main">
	<div class="separate"><span>购物车</span></div>
	<% if(dishs != null){ %>
	<form action="/business/order/createOrder" method="post">
	<%  var i = 0;
		for(dish in dishs){ 
			i = i + 1;
	%>
		<ul class="cartDetial">
			<input type="hidden" name="cuisine_dish_id${i}" value="${dish.cuisine_dish_id}"/>
			<li class="detial_a">
				<img alt="" style="left:10px;" src="${dish.image}"/>
				<span>${dish.name}</span>
			</li>
			<li class="detial_b">
				<div><span>${dish.info}</span></div>
			</li>
			<li class="detial_c">
				<div>
					<img onclick="changeNum(this,${i});" name="sub" class="pointer" alt="" src="/lib/images/business/subduction.gif">
					<input type="text" style="width:50px;" value="${dish.quantity}" id="num${i}" name="num${i}"/>
					<img onclick="changeNum(this,${i});" name="add" class="pointer" alt="" src="/lib/images/business/add.gif"/>
				</div>
				<span>单价：￥${dish.price,numberFormat='#.##'}</span>
				<br/>
				<span style="display:inline;">小计：￥${dish.sum , numberFormat='#.##'}</span>
			</li>
		</ul>
		<hr/>
		<% } %>
		<!-- 新收货人信息表 -->
		<ul id="receiverForm" style="display: none;">
			<table>
				<tr>
					<td>收货人：</td>
					<td><input type="text" name="reciver"/></td>
				</tr>
				<tr>
					<td>地址：</td>
					<td><input type="text" name="address"/></td>
				</tr>
				<tr>
					<td>电话：</td>
					<td><input type="text" name="phone"/></td>
				</tr>
			</table>
		</ul>
		<!-- 操作 -->
		<ul>
			<li>
				<input type="submit" name="checkout" value="提交订单"/>
				<input type="checkbox" id="useNewMsg"/>使用新收货人信息
				<span style="float: right;">合计：￥${total}</span>
			</li>
		</ul>
	<div>
	</form>	
	<% }else{ %>
		<span>车里空荡荡的，去<a href="/">添加你的最爱</a>吧</span>
	<% } %>
</div>
<div id="footer" class="footer">
	<table>
		<tr>
			<td><span class="right">咨询电话：</span></td>
			<td><a href="#" class="left">123456</a></td>
			<td><span class="">送餐电话：</span></td>
			<td><a href="#">123456</a></td>
		</tr>
	</table>
</div>
<!-- 导航区 -->
<div class="nav">
	<a href="#" class="toTop" title="返回顶部"></a>
	<a class="showerweima" href="javascript:void();" title="二维码"></a><!-- 显示二维码 -->
</div>
<!-- 生成二维码 -->
<div class="erweima" style="display:none;">
	<div id="erweima"></div>
</div>
</div>
</body>
<script type="text/javascript" src="/lib/js/business.js"></script>
<script type="text/javascript">
function changeNum(e, id){
	var numObj = $('#num'+id);
	var num = numObj.val();
	if($(e).attr("name") == 'sub' && num>0){
		numObj.val(--num);
	}
	if($(e).attr("name") == 'add'){
		numObj.val(++num);
	}
}
$('#useNewMsg').click(function(){
	$('#receiverForm').toggle();
});
$(function(){
});
</script>
</html>